<template>
    <div>
        <div class="top">{{ info.title }}</div>
        <div class="nav_btn">
            <div class="btn_left">
                <DT />
            </div>
            <div class="btn_right">
                <a @click="toHome">
                    <div class="btn_list" >首页</div>
                </a>
                <a @click="toHistory">
                    <div class="btn_list">铁塔列表</div>
                </a>
                <a @click="toManage">
                    <div class="btn_list">后台管理</div>
                </a>
            </div>
        </div>
    </div>
</template>
<script>
    import DT from "@/Icon/datav/DateTime";

    export default {
        components: {
            DT,
        },
        data() {
            return {
                week: "四",
                title: ["阿勒泰地区广播电视台", "全国广播电视发射塔安全运行大数据平台"],
            };
        },
        methods: {
            toHome: function () {
                this.$router.push({
                    path: '/',
                    query: {
                        index: null,
                    }
                });
            },
            toHistory: function () {
                this.$router.push({
                    path: '/tower/index',
                    query: {
                        index: null,
                    }
                });
            },
            toManage: function () {
                this.$router.push({
                    path: '/tower/index',
                    query: {
                        index: null,
                    }
                });
            },
        },
        props:{
          info:{
            type:Object,
            default:()=>{
              return {
                title:""
              }
            }
          }
        }
    };
</script>
<style scoped>
    .top {
        background: url("../../assets/top.png") no-repeat;
        position: relative;
        top: 0.5vw;
        width: 100%;
        height: 5vw;
        background-size: 100%;
        text-align: center;
        line-height: 4vw;
        color: #0efcff;
        font-size: 1.18vw;
        letter-spacing: 0.1vw;
    }

    .nav_btn {
        position: absolute;
        top: 1.5vw;
        width: 100%;
        height: 2vw;
    }

    .con-info {
        color: #0efcff;
        padding: 0px;
    }

    .con-info-2 {
        color: #0efcff;
        padding: 0px;
    }

    .btn_left {
        float: left;
        width: 25%;
        margin-left: 5%;
        height: 5vh;
    }

    .btn_right {
        float: right;
        width: 25%;
        margin-right: 5%;
        height: 100%;
    }

    .btn_list {
        position: relative;
        float: left;
        /* width: 5.5vw; */
        width: 7.3vw;
        height: 1.6vw;
        text-align: center;
        line-height: 1.6vw;
        font-size: 0.9vw;
        color: #0efcff;
        letter-spacing: 0.1vw;
        cursor: pointer;
    }

    .btn_left a,
    .btn_right a {
        display: inline-block;
    }

    .btn_left a:nth-child(2) {
        margin: 0 0.6vw;
    }

    .btn_left a:nth-child(4) {
        margin-left: 0.6vw;
    }

    .btn_right a:nth-child(2) {
        margin: 0 0.6vw;
    }

    .btn_right a:nth-child(4) {
        margin-left: 0.6vw;
    }

    .btn_list:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 1px solid #6176af;
        transform: skewX(-38deg);
    }

    .btn_list:hover::before {
        border-color: #0efcff;
        box-shadow: 1px 1px 3px 1px #0efcff inset;
    }

    .listActive:before {
        border-color: #0efcff;
        box-shadow: 1px 1px 3px 1px #0efcff inset;
    }

    .counter {
        position: relative;
        left: -10vw;
        top: 3vh;
    }

    .con-week {
        color: aqua;
        position: relative;
        left: 0vw;
        height: 0vh;
    }
</style>
